<template>
    <section class="suggestion">
        <div class="suggestion-container">
            <el-card shadow="hover">
                <div slot="header">
                  <span class="header_title">年度十佳村书记建议</span>
                  <el-tooltip style="cursor: pointer;" effect="light" content="当前年度考核总分*80% + 党员群众满意度得分*20%前十名" placement="top-start">
                    <i class="el-icon-question icon_description"></i>
                  </el-tooltip>
                </div>
                <div class="max_height">
                    <el-col :span="8" v-for="(item,index) in good10"
                            :class="`singleDiv ${ index % 6 <3 ? 'tab_bg' : '' }`"
                    >
                        <div :class="`${(index%3!=2)?'tab_bg_border':''} ${item.hasNew ? 'has_new' : 'aaa'}`">
                            {{item.cadresName}}
                        </div>
                    </el-col>
                    <el-col :span="8" v-if="good10.length%3!=0" v-for="(index) in (3-(good10.length%3))"
                            :class="`singleDiv ${ good10.length % 6 < 3 ? 'tab_bg' : '' }`"
                    >
                        <div :class="(index%3!=2)?'tab_bg_border':''"></div>
                    </el-col>
                </div>
            </el-card>
            <el-card shadow="hover">
                <div slot="header">
                  <span class="header_title">年度村书记疗养建议</span>
                  <el-tooltip style="cursor: pointer;" effect="light" content="村书记等级为三级及三级以上名单" placement="top-start">
                    <i class="el-icon-question icon_description"></i>
                  </el-tooltip>
                </div>
                <div class="max_height">
                    <el-col :span="8" v-for="(item,index) in restList"
                            :class="`singleDiv ${ index % 6 < 3 ? 'tab_bg' : '' }`"
                    >
                        <div :class="`${(index%3!=2)?'tab_bg_border':''} ${item.hasNew ? 'has_new' : 'aaa'}`">
                            {{item.name}}
                        </div>
                    </el-col>
                    <el-col :span="8" v-if="restList.length%3!=0" v-for="(index) in (3-(restList.length%3))"
                            :class="`singleDiv ${ restList.length % 6 < 3 ? 'tab_bg' : '' }`"
                    >
                        <div :class="(index%3!=2)?'tab_bg_border':''"></div>
                    </el-col>
                </div>
            </el-card>
            <el-card shadow="hover">
                <div slot="header">
                  <span class="header_title">村书记重点培养建议</span>
                  <el-tooltip style="cursor: pointer;" effect="light" content="当前年度考核所有村书记" placement="top-start">
                    <i class="el-icon-question icon_description"></i>
                  </el-tooltip>
                </div>
                <div class="max_height">
                    <el-col :span="8" v-for="(item,index) in pioneerList"
                            :class="`singleDiv ${ index % 6 < 3 ? 'tab_bg' : '' }`"
                    >
                        <div :class="`${(index%3!=2)?'tab_bg_border':''} ${item.hasNew ? 'has_new' : 'aaa'}`">
                            {{item.cadresName}}
                        </div>
                    </el-col>
                    <el-col v-if="pioneerList.length%3!=0" :span="8" v-for="(index) in (3-(pioneerList.length%3))"
                            :class="`singleDiv ${ pioneerList.length % 6 < 3 ? 'tab_bg' : '' }`"
                    >
                        <div :class="(index%3!=2)?'tab_bg_border':''"></div>
                    </el-col>
                </div>
            </el-card>
            <el-card shadow="hover" class="grey">
                <div slot="header">
                  <span class="header_title_grey">年度村书记诫勉谈话建议</span>
                  <el-tooltip style="cursor: pointer;" effect="light" content="当前年度各个镇考核分数排名倒数第一" placement="top-start">
                    <i class="el-icon-question icon_description"></i>
                  </el-tooltip>
                </div>
                <div class="max_height">
                    <el-col :span="8" v-for="(item,index) in chat"
                            :class="`singleDiv ${ index % 6 < 3 ? 'tab_bg1' : '' }`"
                    >
                        <div  :class="`${(index%3!=2)?'tab_bg_border':''} ${item.hasNew ? 'has_new' : 'aaa'}`">
                            {{item.cadresName}}
                        </div>
                    </el-col>
                    <el-col :span="8" v-if="chat.length%3!=0" v-for="(index) in (3-(chat.length%3))"
                            :class="`singleDiv ${ chat.length % 6 < 3 ? 'tab_bg1' : '' }`"
                    >
                        <div :class="(index%3!=2)?'tab_bg_border':''"></div>
                    </el-col>
                </div>
            </el-card>
            <el-card shadow="hover" class="grey">
                <div slot="header">
                  <span class="header_title_grey">年度村书记转化集训建议</span>
                  <el-tooltip style="cursor: pointer;" effect="light" content="当前年度考核全市排名后20名" placement="top-start">
                    <i class="el-icon-question icon_description"></i>
                  </el-tooltip>
                </div>
                <div class="max_height">
                    <el-col :span="8" v-for="(item,index) in newTranList"
                            :class="`singleDiv ${ index % 6 < 3 ? 'tab_bg1' : '' }`"
                    >
                        <div :class="`${(index%3!=2)?'tab_bg_border':''} ${item.hasNew ? 'has_new' : 'aaa'}`">
                            {{item.cadresName}}
                        </div>
                    </el-col>
                    <el-col :span="8" v-if="newTranList.length%3!=0" v-for="(index) in (3-(newTranList.length%3))"
                            :class="`singleDiv ${ newTranList.length % 6 < 3 ? 'tab_bg1' : '' }`"
                    >
                        <div :class="(index%3!=2)?'tab_bg_border':''"></div>
                    </el-col>
                </div>
            </el-card>
        </div>
    </section>
</template>
<script>
    export default {
        props:{
            chat:{
                type: Array
            },
            good10: {
                type: Array
            },
            hasResult: {
                type: Boolean,
                default: false
            },
            taskYear: {
                type: String
            }
        },
        name: 'Suggestion',
        data() {
            return {
                restList: [], //疗养名单
                pioneerList: [], //先锋名单
                transferList: [], //转化名单
                newTranList : []
            }
        },
        watch: {
            'hasResult': {
                immediate: true,
                handler: function (val, oldVal) {
                    if (!val) {
                        return;
                    }
                    this.loadRestList();
                    this.loadCadres();
                }
            }
        },
        methods: {
            loadRestList() {
                this.restList = [];
                this.$http("GET", `identity/villageCadres/getRestSuggestSecretary`, false).then(data => {
                    if (data) {
                        this.restList = data.filter(item => item.name !== '王立新');
                    };
                })
            },
            loadCadres() {
                this.$http('GET', `identity/kPIVillageStatistics/getExcellent?taskYear=${this.taskYear}`, false).then(data => {
                    this.pioneerList = data;
                    this.transferList = [].concat(data);
                    this.transferList.reverse();
                    this.transferList.forEach((item,index)=>{
                        if(index < 20){
                            this.newTranList.push(item);
                        }
                    })
                })
            }
        }
    }
</script>
<style scoped>

    .cadre-content {
        display: inline-block;
        height: 40px;
        margin-top: 12px;
        text-align: center;
    }
    .bottom{
         width: 100px;
         height: 35px;
        line-height: 35px;
        color: #FFF;
        background-color: #0976e6;
        border-radius: 5px;
        margin-left: 10px;

    }
    .pioneerList {
      background-color: #0976e6;
    }
    .newTranList {
      background-color: #ec0606;
    }
    .left {
      margin-top: 10px;
      background-color: #faf6f5;
      border-radius: 7px;
      box-shadow: 2px 2px 2px #fafafa;
    }
    .red_black{
        min-height: 375px;
    }
    .ly{
        min-height: 810px;
    }
    .header_title{
        border-left: 3px solid #CC0000;
        padding-left: 5px;
        color: #CC0000;
    }
    .header_title_grey{
        border-left: 3px solid #55BD94;
        padding-left: 5px;
        color: #393939;
    }
    .has_new {
      background-image: url('../../static/review-result/new_secretary.png');
      background-repeat: no-repeat;
    }
</style>
<style>
    .suggestion-container {
        display: flex;
        flex-direction: row;
        font-family:Source Han Sans CN!important;
    }
    .suggestion-container .el-card{
        flex: 1;
    }
    .max_height{
        max-height: 500px;
        overflow: auto;
    }
    .max_height::-webkit-scrollbar-thumb {
        background-color: #5EC79E!important;
    }
</style>
<style scoped lang="less">
    .suggestion .singleDiv {
        height: 45px;
        line-height: 45px;
        font-size: 14px;
        background: #fff;
        border-bottom: 1px solid #FBE3E3;
    }
    .grey .singleDiv {
        height: 45px;
        line-height: 45px;
        font-size: 14px;
        background: #fff;
        border-bottom: 1px solid #DBDBDB;
    }
    .score{
        color:#2EAC69!important;
    }
    .title_bg{
        background:rgba(198,241,227,1)!important;
        border:1px solid rgba(94, 199, 158, 0.1)!important;
        box-shadow:0px 1px 4px 0px rgba(50,140,104,0.06)!important;
        font-size: 14px!important;
        font-weight:600!important;
        color:rgba(19,111,62,1)!important;
        height: 45px!important;
        line-height: 45px!important;
    }

    .suggestion .el-card {
        margin: 8px 10px;
    }
    .suggestion .leave_advice {
        margin-bottom: 30px;
    }
    .reciprocal .rank {
        line-height: 60px;
        height: 60px;
        font-size: 14px;
    }

    .bot .rank {
        padding-left: 0px;
    }
    .rank_btn{
        display: inline-block;
        border: 1px solid #55BD94;
        border-radius: 3px;
        font-size: 15px;
        font-weight: 600;
    }
    .rank_cun{
        width:80px;
        display: inline-block;
        padding: 2px;
        height: 30px;
        line-height: 30px;
    }
    .rank_sj{
        width: 60px;
        display: inline-block;
        background-color: #2EAC69;
        padding: 2px;
        color: #fff;
        height: 30px;
        line-height: 30px;
    }


    .all_city {
        width: 450px;
        display: inline-block;
    }
    .tab_bg {
        height: 45px!important;
        line-height: 45px!important;
        background:#FFF7F8!important;
        /*border-right: 1px solid #FBE3E3!important;*/
        border-bottom: 1px solid #FBE3E3;
    }
    .tab_bg1{
        height: 45px!important;
        line-height: 45px!important;
        background:#E5E5E5!important;
    }
    .tab_bg_border{
        border-right: 1px solid #FBE3E3!important;
        height: 44px
    }
    .grey .tab_bg_border{
        border-right: 1px solid #DBDBDB!important;
        height: 44px
    }
</style>
<style>
    .suggestion .el-card__header {
        border-bottom: 1px solid #FBE3E3!important;
    }
    .grey.el-card__header {
        border-bottom: 1px solid #DBDBDB!important;
    }
</style>
